<template>
	<view class="container">
		<view class="solid-bottom bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold"> 优惠券名称 </view>
			<input type="text" v-model="name" value="" class="text-13 flex-treble" placeholder="请填写优惠券名称" />
		</view>
		<view class="solid-bottom bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold"> 优惠券数量 </view>
			<input type="number" v-model="publishNum" value="" class="text-13 flex-treble" placeholder="请填写优惠券数量" />
		</view>
		<view class="solid-bottom bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold"> 优惠券类型 </view>
			<radio-group class="flex-treble flex justify-between align-center" @change="RadioChange">
				<view class="flex justify-start align-center">
					<radio class="radio yellow" :class="radio == 'A' ? 'bg-white' : ''"
						:checked="radio == 'A' ? true : false" value="A"></radio>
					<view class="title text-13 margin-left-xs">满减券</view>
				</view>
				<view class="flex justify-start align-center">
					<radio class="radio yellow" :class="radio == 'B' ? 'checked' : ''"
						:checked="radio == 'B' ? true : false" value="B"></radio>
					<view class="title text-13 margin-left-xs">折扣券</view>
				</view>
				<view class="flex justify-start align-center">
					<radio class="radio yellow" :class="radio == 'C' ? 'checked' : ''"
						:checked="radio == 'C' ? true : false" value="C"></radio>
					<view class="title text-13 margin-left-xs">发单券</view>
				</view>
				<view class="flex justify-start align-center">
					<radio class="radio yellow" :class="radio == 'D' ? 'checked' : ''"
						:checked="radio == 'D' ? true : false" value="D"></radio>
					<view class="title text-13 margin-left-xs">消费券</view>
				</view>
			</radio-group>
		</view>
		<view v-if="radio=='A'" class="margin-bottom-sm bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold"> 消费满 ¥： </view>
			<view class="flex-treble flex justify-between align-center">
				<input type="text" v-model="useMoneyLimit" value="" class="text-13 color text-center" />
				<view class="text-13 text-666"> 减 </view>
				<input type="text" v-model="amount" value="" class="text-13 color text-center" />
			</view>
		</view>

		<!-- 	<view v-if="radio=='A'" class="margin-bottom-sm bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				消费满 ¥：
			</view>
			<view class="flex-treble flex justify-between align-center">
				<input type="text" value="" class="text-13 color text-center" />
				<view class="text-13 text-666">
					减
				</view>
				<input type="text" value="" class="text-13 color text-center" />
			</view>
		</view> -->
		<view v-else-if="radio == 'B'"
			class="solid-bottom margin-bottom-sm bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				折扣比例:
			</view>
			<input type="number" v-model="discount" maxlength='3' value="" class="text-13 flex-treble"
				placeholder="请输入抵扣比例" />
		</view>
		<view v-else class="solid-bottom margin-bottom-sm bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				优惠金额:
			</view>
			<input type="number" v-model="amounts" value="" class="text-13 flex-treble" placeholder="请输入优惠金额" />
		</view>
		<view v-if="radio == 'D'" style="flex-direction: column" @click="$refs.tkitree._show()"
			class="margin-bottom-sm text-13 flex padding bg-white">
			<view style="display: flex; justify-content: space-between">
				<view class="text-333 text-bold">
					是否限定分类<text class="text-999">(不限定请忽略)</text>
				</view>
				<view class="flex justify-start align-center">
					<view class="text-767696 margin-right-xs"> 请选择 </view>
					<image :src="baseUrl + '/static/right.png'" mode="" style="width: 22rpx; height: 22rpx">
					</image>
				</view>
			</view>

			<view class="flex flex-wrap margin-top-xs">
				<view style="padding: 18rpx 28rpx"
					class="bg-F4F4F4 round margin-left-xs text-df margin-top-sm color t-btn" v-for="item in checked">
					{{ item.name }}
				</view>
			</view>
		</view>
		<view class="solid-bottom bg-white text-13 flex padding">
			<view class="text-333 text-bold" style="flex: 1"> 优惠券描述 </view>
			<textarea v-model="content" style="flex: 3; margin-top: 5rpx; height: 80rpx" placeholder="优惠券描述" />
		</view>
		<view class="solid-bottom text-13 flex justify-between align-center padding bg-white">
			<view class="text-333 text-bold"> 开始日期 </view>
			<view class="flex justify-start align-center" @click="openDate(1)">
				<view class="text-767696 margin-right-xs">
					{{ startTime || "请选择" }}
				</view>
				<image :src="baseUrl + '/static/right.png'" mode="" style="width: 22rpx; height: 22rpx"></image>
			</view>
		</view>
		<view class="margin-bottom-sm text-13 flex justify-between align-center padding bg-white">
			<view class="text-333 text-bold"> 结束日期 </view>
			<view class="flex justify-start align-center" @click="openDate(2)">
				<view class="text-767696 margin-right-xs">
					{{ endTime || "请选择" }}
				</view>
				<image :src="baseUrl + '/static/right.png'" mode="" style="width: 22rpx; height: 22rpx"></image>
			</view>
		</view>
		<!-- 	<view class="margin-bottom-sm text-13 flex justify-between align-center padding bg-white">
			<view class="text-333 text-bold"> 到期时间 </view>
			<view class="flex justify-start align-center" @click="openDate(3)">
				<view class="text-767696 margin-right-xs">
					{{ endTime || "请选择" }}
				</view>
				<image :src="baseUrl + '/static/right.png'" mode="" style="width: 22rpx; height: 22rpx"></image>
			</view>
		</view> -->
		<view class="flex justify-between align-center margin-sm text-15">
			<button @click="addCoupon(1)" class="btn solid padding bg-tr">
				保存
			</button>
			<button @click="addCoupon(2)" class="btn padding bg-color text-white">
				发布
			</button>
		</view>
		<w-picker :visible.sync="visible" mode="date" startYear="2021" endYear="2129" :current="true" fields="hour"
			@confirm="onConfirm($event)" :disabled-after="false" ref="date"></w-picker>
		<tki-tree @confirm="handChecked" ref="tkitree" :multiple="true" idKey="id" :range="producType" rangeKey="name"
			confirmColor="#4e8af7" />
	</view>
</template>

<script>
	import tkiTree from "@/components/tki-tree/tki-tree.vue";
	export default {
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				visible: false,
				radio: "",
				startTime: "请选择",
				end_time: "请选择",
				time_type: "",
				producType: [],
				shopId: "",
				name: "", //优惠券名字
				publishNum: "", //发行数量
				scopeType: 1, //使用范围
				amount: "", //优惠金额
				useMoneyLimit: "", //使用金额限制
				scopeRelationIdList: [], //商品类型
				content: "", //描述
				publishStartTime: "", //发行时间
				publishEndTime: "", //结束时间
				endTime: "", //到期时间
				checked: [], //已选择商品分类
				type: "",
				shopType: "",
				discount: '',
				amounts: ''
			};
		},
		onLoad(options) {
			this.shopType = options.shopType;
			this.shopId = options.shopId;
		},
		onShow() {
			this.getProducType();
		},
		methods: {
			RadioChange(e) {
				this.radio = e.detail.value;

			},
			openDate(e) {
				this.visible = true;
				this.time_type = e;
			},
			onConfirm(e) {
				console.log(e);
				console.log(this.time_type)
				if (this.time_type == 1) {
					this.startTime = e.value;
				} else {
					this.endTime = e.value;
				}
			},
			async getProducType() {
				const [err, rs] = await this.$get(this.$api.home_categoryTreeList, {
					type: 1,
				});
				if (rs) {
					this.producType = rs.data;
				}
			},
			handChecked(data) {
				console.log(data);
				this.checked = data;
			},


			async addCoupon(status) {
				let amountPrice;
				const {

					checked,
					scopeRelationIdList,
					name,
					publishNum,
					scopeType,
					amount,
					useMoneyLimit,
					content,
					startTime,
					endTime,
					type,
					shopId,
					shopType,
					discount,
					amounts
				} = this;

				if (!name) {
					return this.$util.msg("优惠券名字不能为空");
				}
				if (!publishNum) {
					return this.$util.msg("发行数量不能为空");
				}

				if (this.radio == "D" && checked.length != 0) {
					const array = [];
					for (let i in checked) {
						array.push(checked[i].id);
					}
					console.log(array);
					this.scopeRelationIdList = array;
					this.type = 2;
				} else {
					this.scopeRelationIdList = [];
					this.type = 2;
				}
				if (!this.type) {
					return this.$util.msg("优惠券类型不能为空");
				}

				if (this.radio == "A") {
					if (!useMoneyLimit) {
						return this.$util.msg("优惠使用金额限制不能为空");
					}
					if (!amount) {
						return this.$util.msg("优惠金额不能为空");
					}
				}
				if (this.radio == "B") {
					if (!this.discount) {
						return this.$util.msg("优惠金额不能为空");
					}
				}
				if (this.radio == 'C' || this.radio == 'D') {
					if (!this.amounts) {
						return this.$util.msg("优惠金额不能为空");
					}
				}


				if (!name) {
					return this.$util.msg("优惠券名字不能为空");
				}
				if (!content) {
					return this.$util.msg("优惠券描述不能为空");
				}
				if (!startTime) {
					return this.$util.msg("优惠券开始时间不能为空");
				}

				if (!endTime) {
					return this.$util.msg("优惠券结束时间不能为空");
				}
				var date = new Date(startTime)
				var time1 = date.getTime()
				var date2 = new Date(endTime)
				var time2 = date2.getTime()

				if (time1 >= time2) {
					return this.$util.msg('开始时间不能大于结束时间或者相等')
				}

				const data = {
					name,
					publishNum,
					content,
					startTime,
					endTime,
					scopeType: 1,
					shopId,
					shopType,
					status,
					bak1: JSON.stringify(checked),
				};
				if (this.type == 2 && this.scopeRelationIdList.length != 0) {
					data["scopeRelationIdList"] = this.scopeRelationIdList;
					data["scopeType"] = 2;
				}
				if (this.radio == 'A') {
					data['amount'] = this.amount * 100
					data['useMoneyLimit'] = useMoneyLimit * 100
					data['type'] = 4
				}
				if (this.radio == 'B') {
					data['amount'] = this.discount
					data['type'] = 1
				}
				if (this.radio == 'C') {
					data['amount'] = this.amounts * 100
					data['type'] = 3
				}
				if (this.radio == 'D') {
					data['amount'] = this.amounts * 100
					data['type'] = 2
				}

				const [err, rs] = await this.$jsonPost(this.$api.CouponCreate, data);
				if (rs) {
					console.log(rs);
					this.$util.msg(rs.message);
					setTimeout(() => {
						uni.navigateBack();
					}, 1000);
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.btn {
		margin-top: 128rpx;
		width: 346rpx;
		height: 88rpx;
	}
</style>
